JavaScript Nullish Coalescing: Komplexný sprievodca priraďovaním predvolených hodnôt

V JavaScripte je priraďovanie predvolených hodnôt bežnou úlohou. Tradične na tento účel vývojári používali operátor OR (||). Avšak operátor nullish coalescing (??), predstavený v ECMAScript 2020, poskytuje presnejší a spoľahlivejší spôsob spracovania priraďovania predvolených hodnôt, najmä pri práci s hodnotami null alebo undefined. Tento sprievodca poskytuje hĺbkový pohľad na operátor nullish coalescing, skúma jeho syntax, správanie, rozdiely oproti operátoru OR a praktické prípady použitia.

Čo je Nullish Coalescing?

Operátor nullish coalescing (??) je logický operátor, ktorý vráti svoj operand na pravej strane, keď je jeho operand na ľavej strane null alebo undefined. V opačnom prípade vráti svoj operand na ľavej strane. Jednoducho povedané, poskytuje predvolenú hodnotu iba vtedy, keď je premenná striktne null alebo undefined.

Syntax

Syntax operátora nullish coalescing je jednoduchá:

leftOperand ?? rightOperand

Tu je leftOperand premenná alebo výraz, ktorý chcete skontrolovať na hodnotu null alebo undefined, a rightOperand je predvolená hodnota, ktorú chcete priradiť, ak je leftOperand skutočne null alebo undefined.

Príklad

Zvážte nasledujúci príklad:

const username = null ?? "Guest";
console.log(username); // Výstup: Guest

const age = undefined ?? 25;
console.log(age); // Výstup: 25

const city = "London" ?? "Unknown";
console.log(city); // Výstup: London

V tomto príklade je premennej username priradená predvolená hodnota "Guest", pretože je pôvodne null. Podobne je premennej age priradená hodnota 25, pretože začína ako undefined. Premenná city si však zachováva svoju pôvodnú hodnotu, "London", pretože nie je ani null, ani undefined.

Nulové vs. Falsy hodnoty

Je kľúčové pochopiť rozdiel medzi nulovými (nullish) a falsy hodnotami v JavaScripte. Nulová hodnota je buď null alebo undefined. Falsy hodnota je hodnota, ktorá sa v booleovskom kontexte považuje za false. Medzi falsy hodnoty patria:

• null
• undefined
• 0 (nula)
• NaN (Not a Number)
• '' (prázdny reťazec)
• false

Kľúčovým rozdielom je, že operátor nullish coalescing kontroluje iba hodnoty null alebo undefined, zatiaľ čo operátor OR (||) kontroluje akúkoľvek falsy hodnotu.

Rozdiel medzi ?? a ||

Operátor OR (||) je logický operátor OR, ktorý vráti pravý operand, ak je ľavý operand falsy. Hoci sa dá použiť na priraďovanie predvolených hodnôt, môže viesť k neočakávanému správaniu pri práci s hodnotami ako 0 alebo prázdny reťazec.

Príklad: Úskalia operátora ||

const quantity = 0 || 10; // Chceme predvolenú hodnotu 10, ak quantity chýba
console.log(quantity); // Výstup: 10 (Neočakávané!) pretože 0 je falsy

const text = '' || 'Default Text'; // Chceme predvolený text, ak text chýba
console.log(text); // Výstup: Default Text (Neočakávané!) pretože '' je falsy

V prvom príklade sme chceli priradiť predvolené množstvo 10 iba vtedy, ak quantity chýbalo (bolo null alebo undefined). Avšak, pretože 0 je falsy hodnota, operátor OR nesprávne priradil predvolenú hodnotu. Podobne prázdny reťazec spôsobí zobrazenie predvoleného textu, aj keď reťazec existuje (ale je prázdny).

Použitie ?? pre presnosť

Prepíšme predchádzajúci príklad s použitím operátora nullish coalescing:

const quantity = 0 ?? 10;
console.log(quantity); // Výstup: 0 (Správne!)

const text = '' ?? 'Default Text';
console.log(text); // Výstup: '' (Správne!)

Teraz je výstup taký, ako sa očakávalo. Operátor nullish coalescing kontroluje iba hodnoty null alebo undefined, takže 0 a '' sa považujú za platné hodnoty a ich pôvodné hodnoty sa zachovávajú.

Prípady použitia pre Nullish Coalescing

Operátor nullish coalescing je užitočný v rôznych scenároch, kde potrebujete poskytnúť predvolené hodnoty iba vtedy, keď je premenná striktne null alebo undefined. Tu sú niektoré bežné prípady použitia:

1. Spracovanie voliteľných parametrov funkcie

Pri definovaní funkcie s voliteľnými parametrami môžete použiť operátor nullish coalescing na poskytnutie predvolených hodnôt, ak parametre nie sú zadané.

function greet(name, greeting) {
  const userName = name ?? "User";
  const userGreeting = greeting ?? "Hello";
  console.log(`${userGreeting}, ${userName}!`);
}

greet(); // Výstup: Hello, User!
greet("Alice"); // Výstup: Hello, Alice!
greet("Bob", "Greetings"); // Výstup: Greetings, Bob!

2. Nastavenie predvolených možností konfigurácie

Pri práci s konfiguračnými objektmi môžete použiť operátor nullish coalescing, aby ste zabezpečili použitie predvolených hodnôt, ak určité možnosti konfigurácie nie sú špecifikované.

const config = {
  timeout: 5000,
  retries: 3
};

function fetchData(options) {
  const timeout = options.timeout ?? 10000; // Predvolený časový limit 10 sekúnd
  const retries = options.retries ?? 5; // Predvolených 5 pokusov
  console.log(`Timeout: ${timeout}, Retries: ${retries}`);
}

fetchData(config); // Výstup: Timeout: 5000, Retries: 3
fetchData({}); // Výstup: Timeout: 10000, Retries: 5
fetchData({timeout:null, retries: undefined}); // Výstup: Timeout: 10000, Retries: 5

3. Prístup k vlastnostiam vnorených objektov

Pri prístupe k vlastnostiam vnorených objektov môže byť operátor nullish coalescing kombinovaný s operátorom optional chaining (?.), aby sa poskytli predvolené hodnoty, ak sú niektoré z medzivlastností null alebo undefined.

const user = {
  profile: {
    address: {
      city: "New York"
    }
  }
};

const cityName = user?.profile?.address?.city ?? "Unknown";
console.log(cityName); // Výstup: New York

const unknownUser = {};
const unknownCityName = unknownUser?.profile?.address?.city ?? "Unknown";
console.log(unknownCityName); // Výstup: Unknown

4. Práca s API a externými dátami

Pri získavaní údajov z API alebo externých zdrojov sa operátor nullish coalescing môže použiť na poskytnutie predvolených hodnôt, ak niektoré dátové polia chýbajú alebo majú hodnoty null či undefined. Zvážte získavanie údajov o používateľoch z rôznych regiónov. Predpokladajme, že niektoré regióny nemusia vo svojich používateľských údajoch zahŕňať pole `country`.

async function getUserData(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    const data = await response.json();
    const country = data.country ?? "Neznáma krajina";
    const timezone = data.timezone ?? "UTC";
    console.log(`Používateľ je z: ${country}, Časové pásmo: ${timezone}`);
  } catch (error) {
    console.error("Chyba pri získavaní údajov používateľa:", error);
  }
}

// Simulácia rôznych odpovedí API:
const userWithCountry = { name: "John", country: "USA", timezone: "EST" };
const userWithoutCountry = { name: "Jane", timezone: "GMT" };

// Na otestovanie by ste potrebovali skutočné API alebo mock fetch.
// Na účely demonštrácie simulujme odpovede:
global.fetch = async (url) => {
    if (url.includes("123")) {
        return { json: async () => userWithCountry };
    } else if (url.includes("456")) {
        return { json: async () => userWithoutCountry };
    }
    throw new Error("Neočakávaná URL");
};

getUserData(123); // Výstup: Používateľ je z: USA, Časové pásmo: EST
getUserData(456); // Výstup: Používateľ je z: Neznáma krajina, Časové pásmo: GMT

Precedencia operátorov

Operátor nullish coalescing má relatívne nízku precedenciu. Je nižšia ako precedencia operátorov OR (||) a AND (&&). Preto pri kombinovaní operátora nullish coalescing s inými logickými operátormi je nevyhnutné použiť zátvorky na explicitné definovanie poradia operácií. Ak tak neurobíte, môže to viesť k syntaktickým chybám alebo neočakávanému správaniu.

Príklad: Použitie zátvoriek pre lepšiu prehľadnosť

// Bez zátvoriek (SyntaxError)
// const result = false || null ?? "Default"; // SyntaxError: Unexpected token '??'

// So zátvorkami (Správne)
const result = false || (null ?? "Default");
console.log(result); // Výstup: Default

const anotherResult = (false || null) ?? "Default";
console.log(anotherResult); // Výstup: null

V prvom príklade vedie absencia zátvoriek k chybe SyntaxError, pretože JavaScriptový engine nedokáže určiť zamýšľané poradie operácií. Pridaním zátvoriek explicitne povieme enginu, aby najprv vyhodnotil operátor nullish coalescing. Druhý príklad je platný; avšak výstup je iný, pretože výraz s || sa vyhodnotí ako prvý.

Kompatibilita s prehliadačmi

Operátor nullish coalescing (??) je relatívne nová funkcia, preto je dôležité zvážiť kompatibilitu s prehliadačmi, najmä ak cielite na staršie prehliadače. Väčšina moderných prehliadačov podporuje operátor nullish coalescing, vrátane:

• Chrome 80+
• Firefox 72+
• Safari 13.1+
• Edge 80+
• Node.js 14+

Ak potrebujete podporovať staršie prehliadače, môžete použiť transpilátor ako Babel na konverziu vášho kódu na kompatibilnú verziu JavaScriptu. Babel transformuje operátor ?? na ekvivalentný JavaScriptový kód, ktorý funguje v starších prostrediach.

Osvedčené postupy

Tu sú niektoré osvedčené postupy pre efektívne používanie operátora nullish coalescing:

• Používajte ?? pre kontrolu nulových hodnôt: Používajte operátor nullish coalescing (??), keď chcete špecificky poskytnúť predvolenú hodnotu iba vtedy, keď je premenná null alebo undefined.
• Používajte zátvorky pre zložité výrazy: Pri kombinovaní operátora nullish coalescing s inými logickými operátormi používajte zátvorky na jasné definovanie poradia operácií.
• Zvážte kompatibilitu s prehliadačmi: Skontrolujte kompatibilitu s prehliadačmi a v prípade potreby použite transpilátor na podporu starších prehliadačov.
• Používajte ho konzistentne: Osvojte si používanie ?? tam, kde je to vhodné, pre predvídateľnejší štýl kódovania v celom projekte.
• Kombinujte s operátorom optional chaining: Používajte ?? v spojení s operátorom optional chaining ?. na bezpečný prístup a priradenie predvolených hodnôt k vnoreným vlastnostiam objektov.

Globálne aspekty

Pri vývoji pre globálne publikum zvážte nasledujúce body týkajúce sa priraďovania predvolených hodnôt:

• Lokalizácia: Predvolené hodnoty môže byť potrebné lokalizovať na základe jazyka alebo regiónu používateľa. Napríklad predvolený symbol meny alebo formát dátumu.
• Kultúrne normy: Niektoré predvolené hodnoty môže byť potrebné upraviť na základe kultúrnych noriem. Napríklad predvolená uvítacia správa sa môže v rôznych kultúrach líšiť.
• Prístupnosť: Zabezpečte, aby boli predvolené hodnoty prístupné a zrozumiteľné pre používateľov so zdravotným postihnutím. Poskytnite jasné a popisné štítky pre predvolené hodnoty v používateľských rozhraniach.
• Časové pásma a dátumy: Pri práci s dátumami a časmi používajte vhodné časové pásma a formáty dátumov, aby sa zabezpečilo správne zobrazenie predvolených hodnôt používateľom v rôznych regiónoch.

Príklad: Lokalizácia s Nullish Coalescing

Povedzme, že chcete zobraziť predvolenú uvítaciu správu v rôznych jazykoch na základe miestneho nastavenia používateľa. Môžete použiť operátor nullish coalescing na poskytnutie predvolenej správy, ak lokalizovaná správa nie je k dispozícii.

function getWelcomeMessage(locale) {
  const localizedMessages = {
    en: "Welcome!",
    fr: "Bienvenue !",
    de: "Willkommen!"
  };

  const message = localizedMessages[locale] ?? "Welcome!"; // Predvolená hodnota je angličtina, ak sa lokalizácia nenájde
  return message;
}

console.log(getWelcomeMessage("fr")); // Výstup: Bienvenue !
console.log(getWelcomeMessage("es")); // Výstup: Welcome! (Používa sa predvolená anglická verzia)

Záver

Operátor nullish coalescing (??) je cenným prírastkom do jazyka JavaScript. Poskytuje presnejší a spoľahlivejší spôsob priraďovania predvolených hodnôt v porovnaní s operátorom OR (||), najmä pri práci s hodnotami ako 0 alebo prázdnymi reťazcami. Pochopením jeho syntaxe, správania a prípadov použitia môžete písať čistejší a udržateľnejší kód, ktorý presne spracováva priraďovanie predvolených hodnôt. Pri používaní operátora nullish coalescing vo svojich projektoch nezabudnite zvážiť kompatibilitu s prehliadačmi, precedenciu operátorov a globálne aspekty.

Dodržiavaním osvedčených postupov uvedených v tomto sprievodcovi môžete efektívne využiť operátor nullish coalescing na zlepšenie kvality a spoľahlivosti vášho JavaScriptového kódu, čím sa stane robustnejším a ľahšie pochopiteľným. Nezabudnite vo svojom kóde vždy uprednostňovať prehľadnosť a udržateľnosť, a operátor nullish coalescing môže byť silným nástrojom na dosiahnutie týchto cieľov.